// 动态下钻排序柱状图
<template>
  <div class="threeBarChart" id="drilbar"></div>
</template>

<script>
export default {
  name: '',
  data() {
    return {}
  },
  computed: {
    reset() {
      return this.$store.getters.sidebar.opened
    }
  },
  props: {
    xline: Array, // x轴名称列表
    yline: Array, // y轴数据
    config: Object // 参数配置
  },

  methods: {
    // 重新绘制图表
    forceRerender() {

    },
    setChart() {

      this.myChart = this.$echarts.init(document.getElementById('drilbar'))
      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(this.option);
      // 监听柱状图点击事件
      var _this = this
      this.myChart.on('click', function (event) {
        const drilldownData = [
          {
            dataGroupId: '2020',
            data: [
              ['2020_Q1', 4000],
              ['2020_Q2', 3000],
              ['2020_Q3', 3500],
              ['2020_Q4', 3200],
            ]
          },
          {
            dataGroupId: '2020_Q1',
            data: [
              ['2020-01', 400],
              ['2020-02', 300],
              ['2020-03', 350],
              ['2020-04', 320],
            ]
          },
          {
            dataGroupId: '2021',
            data: [
              ['Q1', 4000],
              ['Q2', 3000],
              ['Q3', 3500],
              ['Q4', 3200],
            ]
          },
          {
            dataGroupId: '2022',
            data: [
              ['Q1', 4000],
              ['Q2', 3000],
              ['Q3', 3500],
              ['Q4', 3200],
            ]
          }
        ];
        if (event.data) {
          console.log(event.data.groupId)
          var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId;
          });
          if (!subData) {
            return;
          }
          _this.myChart.setOption({
            xAxis: {
              data: subData.data.map(function (item) {
                return item[0];
              })
            },
            series: {
              type: 'bar',
              id: 'sales',
              dataGroupId: subData.dataGroupId,
              data: subData.data.map(function (item) {
                return {value: item[1], groupId: item[0]};
              }),
              universalTransition: {
                enabled: true,
                divideShape: 'clone'
              }
            },
            graphic: [
              {
                type: 'text',
                left: 50,
                top: 20,
                style: {
                  text: 'Back',
                  fontSize: 18,
                  fill: '#777',
                },
                onclick: function () {
                  _this.myChart.setOption(_this.option);
                }
              }
            ]
          });
        }
      });
    }
  },
  data() {
    return {
      show: true,
      myChart: undefined,
      nowOption: null,
      option: {
        xAxis: {
          data: ['2020', '2021', '2022']
        },
        yAxis: {},
        dataGroupId: '',
        animationDurationUpdate: 500,
        series: {
          type: 'bar',
          id: 'sales',
          data: [
            {
              value: 12000,
              groupId: '2020'
            },
            {
              value: 11000,
              groupId: '2021'
            },
            {
              value: 10000,
              groupId: '2022'
            }
          ],
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        }
      }
    }
  },
  mounted() {
    this.setChart()
  },
  watch: {
    reset() {
      this.forceRerender()
    }
  }
}
</script>

<style lang="less" scoped>
.threeBarChart {
  height: 100%;
  width: 100%;
}
</style>
